<template>
	<div class="flex_col m5 p10">
		<label class="flex_center_self">{{ selectPro?.name }}</label>
		<div class="flex_row">
			<div class="flex_col">
				<div class="flex_col m5 p10 card" v-for="(item, index) in hexs" :key="index">
					<div class="flex_row_center">
						<label>固件名称</label>
						<label class="ml5">{{ item.name }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>固件版本</label>
						<label class="ml5">{{ item.version }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>固件描述</label>
						<label class="ml5">{{ item.description }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>单片机</label>
						<label class="ml5">{{ item.target }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>创建时间</label>
						<label class="ml5">{{ dateFormat(item.create_timestamp) }}</label>
					</div>
					<div class="flex_row_center mt5">
						<label>固件大小</label>
						<label class="ml5">{{ sizeFormat(item.size) }}</label>
					</div>
					<div class="flex_row_center mt5">
						<el-button @click="onClickDelete(item.id)" type="warning">删除</el-button>
					</div>
				</div>

			</div>

			<div style="background-color: black; width: 2px; margin-left: 10px; margin-right: 10px;"></div>

			<div class="flex_col card m5 p10 flex_start_self">
				<label class="flex_center_self">上传固件</label>
				<div class="flex_row_center mt5">
					<label>版本</label>
					<el-input v-model="hexCtx.version" class="ml5" style="width: 300px;" />
				</div>
				<div class="flex_row_center mt5">
					<label>单片机</label>
					<el-input v-model="hexCtx.target" class="ml5" style="width: 300px;" />
				</div>
				<div class="flex_row_center mt5">
					<label>描述</label>
					<el-input v-model="hexCtx.description" class="ml5" type="textarea" style="width: 300px;" />
				</div>
				<div class="flex_row_center mt5 flex_center_self">
					<input accept=".hex" @change="onClickFileChanged" ref="fileInput" type="file" style="display: none;" />
					<el-button @click="onClickSelectFile" type="primary">选择文件</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import router from '@/router';
import { dateFormat, sizeFormat } from '@/utils/config';
import { createHex, deleteHex, queryHex } from '@/utils/http';
import { type Hex } from '@/utils/model';
import { selectPro } from '@/utils/react';
import { runAction, showErr } from '@/utils/ui';
import { ref } from 'vue';

const fileInput = ref<HTMLInputElement | null>(null);
const hexs = ref<Hex[]>([]);
interface HexCtx {
	version: string,
	description: string,
	target: string,
}

const hexCtx = ref<HexCtx>({
	version: '',
	description: '',
	target: 'STM32F103C8'
});

function onClickSelectFile() {
	if (hexCtx.value.version.length == 0) {
		showErr('请输入版本号');
		return;
	}
	if (hexCtx.value.description.length == 0) {
		showErr('请输入描述');
		return;
	}
	fileInput.value?.click();
}

async function onClickFileChanged(event: Event) {
	const target = event.target as HTMLInputElement;
	const files = target.files;
	if (files == null || files.length == 0) {
		return;
	}
	const file = files.item(0);
	if (file == null) {
		return;
	}
	const pro_id = selectPro.value!!.id;
	const body = new Uint8Array(await file.arrayBuffer());
	await runAction('上传', '上传固件', async () => {
		await createHex(pro_id, file.name, hexCtx.value.version, hexCtx.value.description, hexCtx.value.target, body);
		await updateHex();
	});
}

async function onClickDelete(id: number) {
	await runAction('删除', '删除固件', async () => {
		await deleteHex(id);
		await updateHex();
	});
}

async function updateHex() {
	if (selectPro.value == null) {
		await router.replace('/');
		return;
	}
	hexs.value = await queryHex(selectPro.value!!.id);
}

updateHex();

</script>
